<template>
  <div
    :title="view === 'detail'? '商户信息详情': ''"
    :visible="true"
    custom-class="orderDetailWrapper"
    :before-close="closeDialog"
    >
    <el-button type="primary" @click="closeDialog" class="retu">返回</el-button>
    <vue-body>
    	<el-form :model="tableData" label-width="80px">
      	<el-form-item label="排序日期">
        	<el-input v-model="tableData.sortDate" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="置顶等级">
        	<el-input v-model="tableData.topLevel" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="是否有标题图">
        	<el-input v-model="tableData.hasTitleImg" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="是否推荐">
        	<el-input v-model="tableData.isRecommend" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章状态">
        	<el-input v-model="tableData.status" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="日访问数">
        	<el-input v-model="tableData.viewsDay" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章类型">
        	<el-input v-model="tableData.contentType" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章标题">
        	<el-input v-model="tableData.title" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章简短标题">
        	<el-input v-model="tableData.shortTitle" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章作者">
        	<el-input v-model="tableData.author" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章来源">
        	<el-input v-model="tableData.origin" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="来源地址">
        	<el-input v-model="tableData.origin" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章作者">
        	<el-input v-model="tableData.originUrl" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章简介">
        	<el-input v-model="tableData.description" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="发布日期">
        	<el-input v-model="tableData.releaseDate" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="多媒体文件路径">
        	<el-input v-model="tableData.mediaPath" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="多媒体文件类型">
        	<el-input v-model="tableData.mediaType" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="标题颜色">
        	<el-input v-model="tableData.titleColor" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
    	<el-form-item label="是否加粗">
        	<el-input v-model="tableData.isBold" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
    	<el-form-item label="标题图片">
        	<el-input v-model="tableData.titleImg" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
          <el-form-item label="内容图片">
        	<el-input v-model="tableData.contentImg" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
          <el-form-item label="文章模版">
        	<el-input v-model="tableData.tplContent" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
          <el-form-item label="置顶日期">
        	<el-input v-model="tableData.toplevelDate" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文章富文本">
      		<div class="productDetailsBox">
	      		<div v-html="tableData.txt">
	          </div>
          </div>
      	</el-form-item>
          <el-form-item label="标题图片">
        	<el-input v-html="tableData.titleImg" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
    	</el-form>
      <el-form  label-width="80px" v-for="(item,index) in columnListData" :key="index">
      	<el-form-item label="栏目id">
        	<el-input v-model="item.id" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="栏目上级id">
        	<el-input v-model="item.parentId" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="栏目名称">
        	<el-input v-model="item.columnName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      </el-form>
      <el-form label-width="80px" v-for="(item,index) in columnListData" :key="index">
      	<el-form-item label="序号">
        	<el-input v-model="item.priority" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="图片地址">
        	<el-input v-model="item.imgPath" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="图片介绍">
        	<el-input v-model="item.description" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      </el-form>
       <el-form label-width="80px" v-for="(item,index) in contentAttachmentListData" :key="index">
      	<el-form-item label="附件路径">
        	<el-input v-model="item.attachmentPath" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="附件名称">
        	<el-input v-model="item.attachmentName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="文件名称">
        	<el-input v-model="item.fileName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="下载次数">
        	<el-input v-model="item.downloadCount" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      </el-form>
    </vue-body>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { detail } from "@/services/content";
import { imgSrcUrl } from "@/services/imgSrcUrl";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
export default {
  name: "edit-role",
  data () {
    return {
      loading: false,
      orderNo:"",
      formData: {
      },
      dialogFormVisible: false,
      tableData: {},
      columnListData: [],
      contentPictureListData:[],
      contentAttachmentListData:[],
      tableData: {},
      columnList:[],
      mchtId:""
    }
  },
  props: {
    view: {
      type: String,
      default: "detail"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    submit() {
    	this.$emit("close");
    },
    imgSrc(data){
      	return imgSrcUrl() + data;
    },
    async loadData () {
        this.loading = true
        try {
          let data = await detail(this.mchtId);
          console.log(data);
          this.tableData = data.contentDetailsDto;
          this.columnListData = this.tableData.columnList;
          this.contentAttachmentListData = this.tableData.contentAttachmentList;
          this.contentPictureListData = this.tableData.contentPictureListData;
          
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
  },
  mounted() {
  	
  },
  filters: {
      mchtStatus (value) {
        return {'0': '启用', '1': '停用'}[value]
      }
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
.orderDetailWrapper{
  width: 50%;
}
.typeBox{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 30px;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.logoImg{
	height: 120px;
	border-radius: 4px;
	border: 1px solid #bfcbd9;
	padding: 5px;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
.productDetailsBox{
	  background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    padding: 3px 10px;
    overflow: scroll;
    height: 400px;
}
.retu{
  margin-bottom: 20px;
}
</style>
